package com.jqr.activity.myschool.ui.pages

import android.annotation.SuppressLint
import androidx.compose.runtime.Composable
import androidx.compose.runtime.livedata.observeAsState
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavController




import android.widget.Toast
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.calculateEndPadding
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.AccountCircle
import androidx.compose.material.icons.outlined.Settings
import androidx.compose.material3.Button
import androidx.compose.material3.Divider
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarColors
import androidx.compose.material3.TopAppBarDefaults.topAppBarColors

import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

import com.jqr.activity.myschool.App
import com.jqr.activity.myschool.R

import com.jqr.activity.myschool.https.models.ArticleNoContent
import  androidx.lifecycle.viewmodel.compose.viewModel
import com.google.accompanist.swiperefresh.SwipeRefresh
import com.google.accompanist.swiperefresh.SwipeRefreshIndicator
import com.google.accompanist.swiperefresh.rememberSwipeRefreshState
import com.jqr.activity.myschool.viewmodels.MainViewModel

@SuppressLint("StaticFieldLeak")
lateinit var  mNavController: NavController
lateinit var mViewModel: MainViewModel
@Composable
fun ArticleListPage(
    navController: NavController,
    viewModel: MainViewModel

){
    mNavController=navController
    mViewModel=viewModel
    System.out.println(mViewModel)
    mViewModel.changeRefresh(false)
    val  dataState= mViewModel.result.observeAsState()

    System.out.println(dataState)
    dataState.value?.let { result->
        result.getOrNull()?.data?.data?.let {

            MainScreen(articles = it)
//
        }


    }

}

@OptIn(ExperimentalMaterial3Api::class)
@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@Composable
fun MainScreen(articles:List<ArticleNoContent>){
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(
                        text = stringResource(id = R.string.home_page),
                        textAlign = TextAlign.Center,
                        modifier = Modifier.fillMaxWidth(),
                        color = MaterialTheme.colorScheme.primary

                    )

                },
                navigationIcon = {
                    IconButton(onClick = {
                        "Account".showToast()
                    }) {
                        Icon(Icons.Outlined.AccountCircle, contentDescription = "Account",)
                    }

                },
                actions = {
                    IconButton(onClick = {
                        "Settings".showToast()
                    }) {
                        Icon(Icons.Outlined.Settings, contentDescription = "Settings",)
                    }
                },
                colors = topAppBarColors(
                    containerColor =MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor =MaterialTheme.colorScheme.primary
                )
            )
        }
    ) {
            innerPadding->
        Column(
            modifier = Modifier
                .padding(top = innerPadding.calculateTopPadding())
        ) {

            BodyContent(articles)
        }

    }

}
@Composable
fun BodyContent(
    articles: List<ArticleNoContent>,
    modifier: Modifier=Modifier,

    ){
    SwipeRefresh(
        state = rememberSwipeRefreshState(isRefreshing = false) ,
        onRefresh = { mViewModel.changeRefresh(true) },
        indicator = {state, refreshTrigger ->
            SwipeRefreshIndicator(
                state = state,
                refreshTriggerDistance =refreshTrigger,
                scale = true,
                backgroundColor = MaterialTheme.colorScheme.primary,
                shape=MaterialTheme.shapes.small

            )
        }
    ) {

        LazyColumn(
            state = rememberLazyListState(),
            modifier = modifier.padding(8.dp)


        ){
            items(articles.size){
                    index->
                Column(
                    modifier=Modifier.padding(8.dp)
                        .clickable { mNavController.navigate("${PageConstant.ARTICLE_DETAIL_PAGE}/${articles.get(index).id}") }
                ) {
                    Text(text =articles.get(index).title)
                    Text(text =articles.get(index).subTitle, fontSize = 14.sp )
                }
                Divider(modifier=Modifier.padding(horizontal = 8.dp))
            }



        }

    }

}

fun String.showToast() = Toast.makeText(App.context, this, Toast.LENGTH_SHORT).show()

fun String.showLongToast() = Toast.makeText(App.context, this, Toast.LENGTH_LONG).show()

fun Int.showToast() = Toast.makeText(App.context, this, Toast.LENGTH_SHORT).show()

fun Int.showLongToast() = Toast.makeText(App.context, this, Toast.LENGTH_LONG).show()
